<!--A Design by W3layouts 
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
    <title>Sport A Ecommerce Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Sport Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <!--//fonts-->

</head>
<body>
<div id="app">
    <!--header-->
    <div class="line">

    </div>
    <div class="header">
        <div class="logo">
            <a href="index.html"><img src="images/logo.png" alt=""></a>
        </div>
        <div class="header-top">
            <div class="header-grid">
                <ul class="header-in">
                    <li><a href="account.html">我的账户 </a></li>
                    <li>
                        <select class="in-drop">
                            <option value="Yuan" class="in-of">人民币</option>
                            <option value="Dollars" class="in-of">美元</option>
                            <option value="Euro" class="in-of">欧元</option>
                        </select>
                    </li>
                </ul>
                <div class="search-box">
                    <!--                    <div id="sb-search" class="sb-sea rch" :class="{sb-search-open:isSearch==false , :isSearch==true}">-->
                    <div id="sb-search" class="sb-search" :class="{ 'sb-search-open': isSearch }">
                        <form>
                            <input class="sb-search-input" placeholder="输入您的搜索词..." type="search" name="search"
                                   id="search">
                            <input class="sb-search-submit" type="button" value="" @click="isSearch=!isSearch">
                            <!--                                <input class="sb-search-submit" type="submit" value="">-->
                            <span class="sb-icon-search"> </span>
                        </form>
                    </div>
                </div>
                <div class="online">
                    <a href="single.html">网上购物</a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="header-bottom">
                <div class="h_menu4"><!-- start h_menu4 -->
                    <a class="toggleMenu" href="#">Menu</a>
                    <ul class="nav">
                        <li class="active" v-for="(item,index) in sstyle" :key="index"
                            @click="findStyleShoes(item.styleid)"><a
                                :href="'product.html#'+item.styleid">{{item.style}}</a></li>
                        <li><a href="product.html">更多 <i> </i></a>
                            <ul>
                                <li><a href="cart.html">购物车</a></li>
                                <li><a href="account.html">账户</a></li>
                                <li><a href="register.html">注册</a></li>
                            </ul>
                        </li>
                    </ul>

                </div><!-- end h_menu4 -->
                <ul class="header-bottom-in">
                    <li>
                        <select class="drop">
                            <option value="Yuan" class="in-of">活跃起来</option>
                            <option value="Euro" class="in-of">活跃起来1</option>
                            <option value="Dollars" class="in-of">活跃起来2</option>
                        </select>
                    </li>
                    <li>
                        <select class="drop">
                            <option value="Yuan" class="in-of">社区</option>
                            <option value="Euro" class="in-of">社区1</option>
                            <option value="Dollars" class="in-of">社区2</option>
                        </select>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <!---->
    <div class="container">
        <div class="register">
            <h2>注册</h2>
            <div class=" register-top">
                <form>
                    <div>
                        <span>用户名</span>
                        <input type="text" name="username" id="new_username" v-model="username">
                    </div>
                    <div>
                        <span>电子邮件</span>
                        <input type="text" name="email" id="new_email" v-model="email">
                    </div>
                    <div>
                        <span>密码</span>
                        <input type="password" type="password" name="pwd" id="new_pwd" v-model="pwd">
                    </div>
                    <input type="submit" value="提交" @click="reg">
                </form>
            </div>
        </div>
    </div>

    <!---->
    <!--footer-->
    <div class="footer">
        <div class="col-md-3 footer-left">
            <h4>体育</h4>
            <div class="run-top">
                <ul class="run-grid">
                    <li><a href="#">运动</a></li>
                    <li><a href="#">循环</a></li>
                    <li><a href="#">铁人三项</a></li>
                    <li><a href="#">健康</a></li>
                    <li><a href="#">网球</a></li>
                    <li><a href="#">更多运动</a></li>
                </ul>
                <ul class="run-grid">
                    <li><a href="#">风格</a></li>
                    <li><a href="#">特殊</a></li>
                    <li><a href="#">品牌活动</a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 footer-left left-footer">
            <h4>最近的</h4>
            <div class="run-top top-run">
                <ul class="run-grid">
                    <li><a href="#">新闻 & 活动</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">视频</a></li>
                    <li><a href="#">购物</a></li>
                    <li><a href="#">赞助</a></li>
                    <li><a href="#">更多运动</a></li>
                </ul>
                <ul class="run-grid">
                    <li><a href="#">俱乐部 & 培训 </a></li>
                    <li><a href="#">活动地图</a></li>
                    <li><a href="#">挑战世界</a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-2 footer-left left-footer">
            <h4>您的账户</h4>
            <ul class="run-grid-in">
                <li><a href="account.html">登录</a></li>
                <li><a href="#">我的运动</a></li>
                <li><a href="#">我的活动</a></li>
            </ul>
        </div>
        <div class="col-md-4 footer-left left-footer">
            <ul class="social-in">
                <li><a href="#"><i> </i></a></li>
                <li><a href="#"><i class="youtube"> </i></a></li>
                <li><a href="#"><i class="facebook"> </i></a></li>
                <li><a href="#"><i class="twitter"> </i></a></li>
            </ul>
            <div class="letter">
                <h5>通讯</h5>
                <span>在下一篇文章中</span>
                <h6>NRL：本周末我们学到的五件事</h6>
                <p>支持郊区游戏;勇士撕裂</p>
                <a href="register.html" class="sign">注册并获取更多</a>
                <p class="footer-class"> © 2015 Sport 版权所有 |<a href="http://w3layouts.com/" target="_blank">W3layouts</a>的模板
                </p>
            </div>

        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- search-scripts -->
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<!-- //search-scripts -->
<script type="text/javascript" src="js/nav.js"></script>

<script src="js/jquery-1.9.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        //model数据
        data: {
            //注册与登录数据
            username: 'joker',
            pwd: 'a',
            email:'a@163.com',
            valcode: '',	//验证码

            isSearch:false,     //搜索框显示状态

            sstyle:[],	//商品类型
        },
        methods: {
            reg: function () {
                var params=new URLSearchParams();
                params.append("username",this.username);
                params.append("pwd",this.pwd);
                params.append("email",this.email);
                axios.post('user.action?op=reg',params).then(result=>{
                    let jm=result.data;
                    if (jm.code==0){
                        alert("注册失败的原因是"+jm.error);
                    }else {
                        alert("注册成功");
                    }
                });
            },
            //登录状态
            checkLogin:function (){
                return axios.get("user.action?op=checkLogin");
            },
            //显示商品分类栏
            findStyle:function (){
                return axios.get("shoes.action?op=findStyle");
            },
            //点击分查询
            findStyleShoes: function (styleid) {
                var params = new URLSearchParams();
                // 获取片段标识符部分，即 '#item.sid'
                // var fragment = window.location.hash;
                // // 去除 '#' 符号
                // var styleid = fragment.substring(1); // 去除 '#' 符号
                // console.log("Received sid value:", sid);
                params.append("styleid", styleid);
                axios.post("shoes.action?op=findStyleShoes", params).then(result => {
                    vm.$data.shoes = result.data.obj;
                });
            },
        },
        mounted: function () {
            axios.all([this.checkLogin(),this.findStyle()]).then(
                axios.spread((d1,d2)=>{
                    if (d1.data.code==1){
                        //vm.$data.指的是model中的数据
                        //this.username:这是view-model中的数据
                        vm.$data.username = d1.data.obj.username;
                        vm.$data.isLogin=true;
                    }
                    if (d2.data.code==1){
                        vm.$data.sstyle = d2.data.obj;
                    }
                    this.findStyleShoes(this.sstyle.styleid);
                })
            );
        },
    });

</script>
</body>
</html>